
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript简易日历</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }

</style>

</head>

<body>

<div id="tab" class="calendar">

    <ul id="box">
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li ><h2>2</h2><p>FER</p></li>
        <li ><h2>3</h2><p>MAR</p></li>
        <li ><h2>4</h2><p>APR</p></li>
        <li ><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text" id="txt">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪玩吧～</p>
    </div>

</div>
<script>
	var arr=['快过年了，大家可以商量着去哪玩吧～',
		'大家好好学习吧222222~~~',
		'大家好好学习吧222222333~~~',
		'大家好好学习吧222444222~~~',
		'大家好好学习555吧222222~~~',
		'大家好好学习吧666222222~~~',
		'大家好好学习吧227772222~~~',
		'大家好好学习吧28888822222~~~',
		'大家好好学习吧99999222222~~~',
		'大家好好学习10000000吧222222~~~',
		'大家好好学习吧111111222222~~~',
        '大家好好学习吧22222200000000000~~~'];
        
    var ali = document.querySelectorAll("#box li");

    var oh2 = document.querySelector(".text h2");
    var op = document.querySelector(".text p");

    // 1. 遍历所有元素，准备绑定事件
    // 循环会直接执行，不会等待任何代码
    for(var i=0;i<ali.length;i++){
        // 5. 因为，循环中的事件无法拿到循环内部的变量；所以，为了方便的在事件内部获取到当前元素的索引，得，提前在能够拿到所有元素，能够拿到索引时，将索引绑定到每个元素身上
        // 可以使用html属性，也可使用js属性
        ali[i].abc = i;

        // 2. 绑定点击事件
        // 点击事件，如果没有点击，没有执行
        ali[i].onclick = function(){
            // 当点击时，循环早就执行结束了，所以在事件中拿到的循环中的变量，必然是循环结束后的值
            // console.log(i);
            // 为了获取到当前元素，通过this关键字
            // console.log(this);
            // 3. 先取消所有li的class
            for(var j=0;j<ali.length;j++){
                ali[j].className = "";
            }
            // 4. 给当前li添加class
            this.className = "active";
            
            // 6. 拿到当前元素，通过html属性或js属性拿到提前绑定好的索引
            // console.log(this.abc);
            // 使用索引
            oh2.innerHTML = this.abc+1 + "月活动";
            op.innerHTML = arr[this.abc];
        }
    }

    // 异步


    // ali[0].abc = 0
    // ali[1].abc = 1
    // ali[2].abc = 2
    // ali[3].abc = 3
    // ali[4].abc = 4



</script>
</body>
</html>
